<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>app维护页面</title>
  <!--给页面的相对路径明确指定一个参照物-->
  <base href="http://localhost:8080/appsys/">
</head>
<body>
<div id="app">
  <div class="query-form">
    软件名称 <input type="text" v-model="queryForm.softwareName">
    APP状态
    <select  v-model="queryForm.status">
      <option value="">--请选择--</option>
      <option v-for="st in appStatus" :value="st.valueId">{{st.valueName}}</option>
    </select>
    所属平台
    <select v-model="queryForm.flatformId">
      <option value="">--请选择--</option>
      <option v-for="st in appFlatforms" :value="st.valueId">{{st.valueName}}</option>
    </select>
    一级分类
    <select v-model="queryForm.categoryLevel1">
      <option value="">--请选择--</option>
      <option v-for="st in categories1" :value="st.id">{{st.categoryName}}</option>
    </select> <br>
    二级分类
    <select v-model="queryForm.categoryLevel2">
      <option value="">--请选择--</option>
      <option v-for="st in categories2" :value="st.id">{{st.categoryName}}</option>
    </select>
    三级分类
    <select v-model="queryForm.categoryLevel3">
      <option value="">--请选择--</option>
      <option v-for="st in categories3" :value="st.id">{{st.categoryName}}</option>
    </select>

    <input type="button" value="查询" @click="queryAppInfo">
  </div>

  <table>
    <tr>
      <td>编号</td>
      <td>软件名</td>
      <td>支持ROM</td>
      <td>软件大小（单位：M）</td>
    </tr>
    <tr v-for="app in apps">
      <td>{{app.id}}</td>
      <td>{{app.softwareName}}</td>
      <td>{{app.supportROM}}</td>
      <td>{{app.softwareSize}}</td>
    </tr>
  </table>


</div>


<script src="static/js/vue.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/qs.min.js"></script>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      appStatus: [],
      appFlatforms: [],
      categories1: [],
      categories2: [],
      categories3: [],
      queryForm: {
        softwareName: null,
        status: null,
        flatformId: null,
        categoryLevel1: null,
        categoryLevel2: null,
        categoryLevel3: null
      },
      apps:[]
    },
    created:function(){
      this.queryCategories1();
      this.queryStatusDict();
      this.queryFlatformDict();
    },
    methods:{
      queryStatusDict:function(){
        var that =this;
        axios.get("http://localhost:8080/appsys/dict/query?typeCode=APP_STATUS")
        .then(function (res) {
          that.appStatus = res.data.data;
        });
      },
      queryFlatformDict:function(){
        var that =this;
        axios.get("http://localhost:8080/appsys/dict/query?typeCode=APP_FLATFORM")
        .then(function (res) {
          that.appFlatforms = res.data.data;
        });
      },
      queryCategories1:function(){
        var that =this;
        axios.get("http://localhost:8080/appsys/cate/query")
        .then(function (res) {
          that.categories1 = res.data.data;
        });
      },
      queryAppInfo:function () {
        var that =this;
        axios.get("http://localhost:8080/appsys/app/query",{params:this.queryForm})
        .then(function (res) {
          that.apps = res.data.data;
        });
      }
    },
    watch:{
      "queryForm.categoryLevel1":function (newVal) {
          this.queryForm.categoryLevel2='';
          if(newVal===""){
              this.categories2=[];
              return;
          }else{
            var that =this;
            axios.get("http://localhost:8080/appsys/cate/query?parentId="+newVal)
            .then(function (res) {
              that.categories2 = res.data.data;
            });
          }
      },
      "queryForm.categoryLevel2":function (newVal) {
        this.queryForm.categoryLevel3='';
        if(newVal===""){
          this.categories3=[];
          return;
        }else{
          var that =this;
          axios.get("http://localhost:8080/appsys/cate/query?parentId="+newVal)
          .then(function (res) {
            that.categories3 = res.data.data;
          });
        }
      }
    }
  });
</script>
</body>
</html>
